<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 模块列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="add">创建模块</el-button>
                <el-input v-model="keyword" placeholder="筛选模块" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-lx-search" @click="query">筛选</el-button>
            </div>
            <el-table style="width:100%" :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" >
              <el-table-column type="index" label="序号" align="center" width="50"/>
              <el-table-column prop="fdName" label="模块名称" sortable width="150"/>
              <el-table-column prop="fdModulePath" label="模块路径" width="150"/>
              <el-table-column prop="fdCreateTime" label="日期" :formatter="dateFormat" width="150"/>
              <el-table-column prop="fdRemark" label="备注"/>
              <el-table-column label="操作" width="400" align="center">
                  <template slot-scope="scope">
                      <el-button type="primary" @click="handleViewTableList(scope.row)">查看</el-button>
                      <el-button @click="handleEdit(scope.row)">编辑</el-button>
                      <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                      <el-button type="success" @click="handleGenerateCode(scope.row)">生成代码</el-button>
                  </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog  :visible.sync="addVisible" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="模块名称">
                    <el-input class="input" v-model="form.fdName" style="width:92%"></el-input>
                </el-form-item>
                <el-form-item label="模块路径">
                    <el-input class="input" v-model="form.fdModulePath" style="width:92%"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="4" class="input" style="width:92%" v-model="form.fdRemark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import dateUtil from '@/utils/dateUtils';
    export default {
        name: 'CodeGenerateList',
        data() {
            return {
                tableData:{
                    keyword: '',
                    size:0,
                    total:0,
                    current:1,
                    records: []
                },
                form: {
                    fdName: '',
                    fdModulePath: '',
                    fdRemark: '',
                    fdId: ''
                },
                keyword: '',
                addVisible:false,
                index:-1,
                id:-1,
                fullscreenLoading:false
            }
        },
        created() {
            this.getData();
        },
        methods: {
            add() {
                this.resetFormData();
                this.addVisible = true;
            },
            save() {
                this.fullscreenLoading = true;
                this.addVisible = false;
                this.$put('/api/code/generate/code_generate_module_info',this.form).then((res) => {
                        this.fullscreenLoading = false;
                        if(res.status==1){
                            this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            this.getData();
                            this.resetFormData();
                        }else{
                            this.$message.error(res.message);
                        }
                    });
            },
            resetFormData(){
                this.form.fdId = '';
                this.form.fdName = '';
                this.form.fdModulePath = '';
                this.form.fdRemark = '';
            },
            getData() {
                this.$post('/api/code/generate/code_generate_module_info/list',{
                    keyword: this.tableData.keyword,
                    current: this.tableData.current
                }).then((res) => {
                    this.tableData = res.data;
                });
            },
            query(){
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            dateFormat(obj,column){
                return dateUtil.format(obj.fdCreateTime);
            },
            handleViewTableList(row) {
                let routeUrl = {
                    name: "/code/generate/tables",
                    params: {moduleObj:row}
                };
                this.$router.push(routeUrl);
            },
            handleEdit(row){
                let id = row.fdId;
                this.form.fdName = row.fdName;
                this.form.fdModulePath = row.fdModulePath;
                this.form.fdRemark = row.fdRemark;
                this.form.fdId = row.fdId;
                this.addVisible = true;
            },
            handleDelete(index,row){
                this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
                    this.$delete('/api/code/generate/code_generate_module_info',{
                        id:row.fdId
                    }).then((res) => {
                        this.tableData.records.splice(index,1)
                        this.$message({type:'success',message:'删除成功!'})
                    });
                })
            },
            handleCurrentChange(value){
                this.tableData.current = value;
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            handleGenerateCode(row){
              this.$fetch('/api/code/generate',{
                  id:row.fdId
              }).then((res) => {
                  
                  this.$message.success('代码生成成功!');
              })
            }
        }
    }

</script>

<style scoped>
 @import "~@/assets/css/list.css";
 .input {
  width:350px;
}
</style>
